<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1000, initial-scale=1.0">
    <title>云盘空间</title>
    <!-- 引入ElementPlus样式 -->
    <link rel="stylesheet" href="./css/ElementPlus/index.css"/>
    <!-- 引入 Vue 3 -->
    <script src="./js/vue3/index.js"></script>
    <script src="./js/axios/index.js"></script>
    <!-- 引入API接口管理 -->
    <script src="./js/api.js"></script>
    <!-- 引入ElementPlus js代码 -->
    <script src="./js/elementplus/index.js"></script>
    <script src="./js/elementplus/icons.js"></script>
    <script  src="./js/varlet/index.js"></script>
    <!-- 引入多媒体预览组件 -->
    <script src="./js/multiPreview.js"></script>

</head>

<body>
<div id="app">
    <el-container class="file_body">
        <el-header class="body_headers">
            <span>{{title}}</span>
        </el-header>
        <el-dialog
                v-model="dialogVisible"
                title="文件上传"
                width="500"
                :before-close="handleClose"
        >
            <el-upload
                    v-model:file-list="fileList"
                    class="upload-demo"
                    :action="host+ '/fileInfo'"
                    multiple
                    drag
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    :on-exceed="handleExceed"
                    :on-success="getFileInfo"
            >
                <el-button  style="width: 430px;height:50px;padding-right: 10px;" type="primary"><el-icon><Position /></el-icon>点击或拖拽上传</el-button>
            </el-upload>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">关闭</el-button>
                </div>
            </template>
        </el-dialog>
        <el-main class="file_box">
            <div class="file_headers">
                <div class="toolbar-left">
                    <el-tabs v-model="activeFileType" @tab-change="handleFileTypeChange"  class="file-type-tabs">
                        <el-tab-pane label="全部文件" name="0"></el-tab-pane>
                        <el-tab-pane label="图片" name="1"></el-tab-pane>
                        <el-tab-pane label="文档" name="2"></el-tab-pane>
                        <el-tab-pane label="视频" name="7"></el-tab-pane>
                        <el-tab-pane label="音频" name="6"></el-tab-pane>
                        <el-tab-pane label="其他" name="-1"></el-tab-pane>
                    </el-tabs>
                </div>
                <div class="file_headers_operation">
<!--                    <var-button type="success">成功按钮</var-button>-->
                    <el-button type="primary" @click="upLoadFile">
                        <el-icon ><Upload /></el-icon>上传文件
                    </el-button>
                    <el-button id="newCreateFile" ><el-icon><Plus /></el-icon>
                        新建文件夹</el-button>
                </div>
                <div class="file_headers_fileName_search">
                    <div class="mt-4">
                        <el-input
                                v-model="input3"
                                style="max-width: 600px;width: 300px"
                                placeholder="请输入文件名/文件后缀进行模糊搜索"

                        >
                            <template #append>
                                <el-button  @click="showMessage" style="color: #ffffff;background-color: #409eff;border-radius: 0px 5px 5px 0px;">
                                    <el-icon><Search />
                                    </el-icon>
                                    </el-button>
                            </template>
                        </el-input>
                    </div>

                </div>


            </div>

            <div class="grid-container">
                <div class="grid-item" v-for="(item,index) in fileDataList" :key="item.id">
                    <img :src="item.cover"  @click="clickShow(index)" />
                    <span>{{ item.file_name }}</span>
<!--                    <span v-if="item.image_id">{{ item.file_name }}</span>-->
                    <div class="time_text">{{ item.size }}</div>
                    <!-- 悬浮元素 -->
                    <div title="更多" class="item-cponent">
                        <!--                        <img src="./resource/img/more.png"  style="width: 40px;height:20px;" />-->
                        <el-icon style="color: #409EFF; font-size:20px;"><More /></el-icon>
                        <!-- 二级悬浮元素 -->
                        <div class="item-cponent-list">
                            <div class="cponent-item-box">
                                <div class="cponent-item">
                                    <el-icon><Delete /></el-icon>
                                    &nbsp
                                    删除
                                </div>
                                <div class="cponent-item">
                                    <el-icon><Position /></el-icon>
                                    &nbsp
                                    重命名
                                </div>
                            </div>

                        </div>
                    </div>

<!--                    <var-overlay v-model:show="show">-->
<!--                        <img :src="item.cover"   />-->
<!--                    </var-overlay>-->
                    <var-image-preview
                            :images="imagePreviewList"
                            v-model:show="show"
                            :initial-index="imagePreviewId"
                            closeable
                    />
                </div>

                <div class="el-pagination">
                    <el-pagination
                            background
                            layout="total, prev, sizes, pager, next,jumper"
                            :current-page="query.page+1"
                            small
                            :page-size="query.rows"
                            :total="pageTotal"
                            :page-sizes="[12, 24, 36]"
                            @current-change="handlePageChange"
                            @size-change="handleSizeChange">
                    </el-pagination>
                </div>


            </div>


        </el-main>

    </el-container>
    
    <!-- 多媒体预览组件 -->
    <multi-media-preview 
        :visible="multiPreviewVisible" 
        :files="fileDataList" 
        :current-index="multiPreviewIndex"
        @update:visible="multiPreviewVisible = $event"
        @update:current-index="multiPreviewIndex = $event"
    ></multi-media-preview>
</div>

<script  src="./js/cloud.js"></script>

<link rel="stylesheet" href="./css/cloud.css"/>
<link rel="stylesheet" href="./css/multiPreview.css"/>
</body>

</html>
